<template>
	<view>
		<!-- 物流详情 -->
		<view class="margin-bj bg-white radius-bock" v-if="isLoad">
			<view class="flex align-center margin-bj" @tap="phoneCall(data.kuaidi.tel)">
				<view class="cu-avatar lg radius-bock iconfont icon-zhaopian" :style="{ backgroundImage: 'url(' + $wanlshop.oss(data.kuaidi.logo, 40,40) + ')' }"></view>
				<view class="margin-left-bj">
					<view>{{data.kuaidi.name}}</view>
					<view class="text-min">
						官方电话
						<text class="margin-lr-xs">{{data.kuaidi.tel}}</text>
						<text class="iconfont icon-jiantou"></text>
					</view>
				</view>
			</view>
			<view class="courier-number" @tap="onCopy(data.express_no)">
				{{data.kuaidi.name}} <text class="margin-lr-xs">{{data.express_no}}</text> <text class=" icon1 iconfont icon-lianjie"></text>
			</view>
		</view>
		
		<!-- 运单详情 -->
		<view class="margin-bj bg-white radius-bock" v-if="isLoad">
			<view class="padding-left-bj padding-top-bj text-sm">
				运单详情
			</view>
			<view class="order-tracking">
				<view class="time-axis wanl-gray">
					<!-- <view class="timeaxis-item">
						<view class="text-min">[收货地址]</view>
						<view class="timeaxis-node">
							<view class="cu-tag round"><text>收</text></view>
						</view>
					</view> -->
					<view class="timeaxis-item" v-for="(item, index) in data.express" :key="item.id">
						<block v-if="index == 0">
							<view class="wanl-black">
								<view>{{ item.status }}</view>
								<view class="text-min">{{ item.context }}</view>
								<view class="text-min margin-top-xs">{{ item.time }}</view>
							</view>
							<view class="timeaxis-node">
								<view class="cu-tag round wanl-bg-orange">
									<text class="iconfont icon-dian" v-if="item.status == '在途'"></text>
									<text class="iconfont icon-yinanjiantixing" v-else-if="item.status == '揽收'"></text>
									<text class="iconfont icon-31xuanze" v-else-if="item.status == '签收'"></text>
									<text class="iconfont icon-paisongtixing" v-else-if="item.status == '派件'"></text>
									<text class="iconfont icon-yinanjiantixing" v-else-if="item.status == '疑难'"></text>
									<text class="iconfont icon-daifahuo" v-else-if="item.status == '退签'"></text>
									<text class="icongont icon-guanbi" v-else-if="item.status == '退回'"></text>
									<text class="iconfont icon-duijiangjiankong" v-else-if="item.status == '转投'"></text>
									<text class="iconfont icon-31daifukuan" v-else-if="item.status == '尚未付款'"></text>
									<text class="iconfont icon-chanpincanshu" v-else-if="item.status == '已下单'"></text>
									<text class="iconfont icon-shijian" v-else-if="item.status == '仓库处理中'"></text>
								</view>
							</view>
						</block>
						<block v-else>
							<view>
								<view v-if="item.status != '在途'">{{ item.status }}</view>
								<view class="text-min">{{ item.context }}</view>
								<view class="text-min margin-top-xs">{{ item.time }}</view>
							</view>
							<view class="timeaxis-node">
								<text class="iconfont icon-dian" v-if="item.status == '在途'"></text>
								<view class="cu-tag round" v-else-if="item.status == '揽收'">
									<text class="iconfont icon-daifahuo"></text></view>
								<text class="iconfont icon-yinanjiantixing" v-else-if="item.status == '疑难'"></text>
								<text class="iconfont icon-daifahuo" v-else-if="item.status == '退签'"></text>
								<view class="cu-tag round" v-else-if="item.status == '派件'">
									<text class="iconfont icon-paisongtixing"></text></view>
								<text class="icongont icon-guanbi" v-else-if="item.status == '退回'"></text>
								<text class="iconfont icon-duijiangjiankong" v-else-if="item.status == '转投'"></text>
								<text class="iconfont icon-31daifukuan" v-else-if="item.status == '尚未付款'"></text>
								<text class="iconfont icon-chanpincanshu" v-else-if="item.status == '已下单'"></text>
								<text class="iconfont icon-shijian" v-else-if="item.status == '仓库处理中'"></text>
							</view>
						</block>
					</view>
		
					<view class="timeaxis-item">
						<view class="text-min">包裹等待揽收</view>
						<view class="timeaxis-node"><text class="icon iconfont icon-dian"></text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const thorui = require("@/components/tui-clipboard/tui-clipboard.js")
	export default{
		data(){
			return{
				data: {
					order_no: "加载中...",
					goods:[]
				},
				isLoad: false
			}
		},
		methods:{
		// 获取订单
		async loadData(data) {
			this.$api.post({
				url: '/wanlshop/order/getLogistics',
				loadingTip: '加载中',
				data: data,
				success: res => {
					this.data = res;
					this.isLoad = true;
					console.log('data',this.data);
				}
			});
		},	
		phoneCall(number){
			uni.makePhoneCall({
			    phoneNumber: number
			});
		},
		onCopy(text) {
			thorui.getClipboardData(text, (res) => {
				// #ifdef H5 || MP-ALIPAY
				if (res) {
					this.$wanlshop.msg('单号复制成功');
				} else {
					this.$wanlshop.msg('单号复制失败');
				}
				// #endif
			})
		}
		},
		onLoad(option) {
			this.loadData({
				id: option.id
			});
			console.log('option',option)
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f0f0f0;
	}
	.margin-bj{
	margin: 25rpx;	
	color: #222222;
	border-radius: 18rpx;
	overflow: hidden;
	background-color: #FFFFFF;
	}
	.flex{
		// background-color: pink;
		display: flex;
		align-items: center;
	}
	
	.cu-avatar{
		background-color: #F0F0F0;
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		font-size: 50rpx;
		color: #999999;
		text-align: center;
		line-height: 100rpx;
	}
	.margin-left-bj{
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #282828;
	}
	// .iconfont{
	// 	font-size: 35rpx;
	// 	color: #808080;
	// }
	.margin-left-bj .text-min{
		margin-top: 5rpx;
		text{
			margin-left: 10rpx;
		}
	}
	.courier-number{
		// background-color: pink;
		text{
			margin-left: 10rpx;
		}
		.icon1{
			font-size: 30rpx;
			color: #282828;
			// background-color: pink;
		}
	}
	.padding-left-bj{
		padding-left: 25rpx;
		padding-top: 25rpx;
		font-size: 28rpx;
		color: #282828;
	}
	.wanl-black{
		font-size: 28rpx;
		color: #282828;
	}
	.wanl-black .text-min{
		font-size: 24rpx;
		margin-bottom: 5rpx;
		color: #282828;
	}
	.wanl-order-goods .scroll-view{
			white-space: nowrap;
			width: 100%;
			display: flex;
		}
		.wanl-order-goods .scroll-view .list{
			display: flex;
		}
		.wanl-order-goods .scroll-view .list .item{
			margin-right: 10rpx;
		}
		.wanl-order-goods .scroll-view .list .item .cu-avatar{
			width: 150rpx;
			height: 150rpx;
		}
	.courier-number {
		font-size: 22rpx;
		padding: 20rpx 25rpx;
		background-color: #fbfbfb;
	}
	.order-tracking {
		box-sizing: border-box;
		padding: 25rpx;
		padding-left: 50rpx;
		padding-top: 25rpx;
		// background-color: pink;
	}
	.order-tracking .cu-tag {
		// padding: 0 10rpx;
		height: 50rpx;
		width: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		justify-items: center;
		font-size: 35rpx;
		color: #FFFFFF !important;
		background-color:  #da2625;
		border-radius: 50rpx;
	}
	.order-tracking .time-axis {
		padding-left: 20px;
		box-sizing: border-box;
		position: relative;
	}
	
	.order-tracking .time-axis::before {
		content: ' ';
		position: absolute;
		left: 0;
		top: 0;
		width: 1px;
		bottom: 0;
		border-left: 1px solid #ddd;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleX(0.5);
		transform: scaleX(0.5);
	}
	.order-tracking .time-axis .timeaxis-item {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		// align-items: center;
		margin-bottom: 25px;
		// background-color: red;
	}
	.order-tracking .time-axis .timeaxis-item .text-min{
		font-size: 26rpx;
		color: #808080;
		// background-color: #1CBBB4;
		margin-top: 10rpx;
	}
	
	.order-tracking .time-axis .timeaxis-item .timeaxis-node {
		position: absolute;
		top: 0;
		left: -20px;
		transform-origin: 0;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
		// background-color: #39B54A;
	}
	.icon{
		font-size: 50rpx;
		color: #808080;
		// background-color: #007AFF;
		text-align: center;
		// height: 30rpx;
	}
</style>
